<template>
  <div class="h-full bg-zinc-200 dark:bg-zinc-800 duration-400 xl:pt-1">
    <div
        class="max-w-screen-lg mx-auto bg-white dark:bg-zinc-900 duration-400 xl:rounded-sm xl:border-zinc-200 xl:dark:border-zinc-600 xl:border-[1px] xl:px-4"
    >
      <!-- 移动端 navbar 处理 -->
      <mine-navbar v-if="isMobileTerminal" sticky :clickLeft="onNavbarLeftClick">
        精选会员
      </mine-navbar>

      <div class="py-2 px-1">
        <h2
            class="text-center text-[34px] font-bold tracking-widest text-yellow-600"
        >
          精选VIP
        </h2>
        <p class="text-center text-lg text-yellow-500">
          升级精选VIP，畅想所有内容
        </p>
        <div
            class="flex justify-between mt-5 overflow-auto pb-2 scrollbar-thin scrollbar-thumb-zinc-200 dark:scrollbar-thumb-zinc-700 scrollbar-track-transparent"
        >
          <mine-pay-menu-item
              v-for="item in vipPayList"
              :key="item.id"
              :hot="item.isHot"
              :select="item.id === currentPayData.id"
              :data="item"
              @click="onChangeCurrentPay"
          ></mine-pay-menu-item>
        </div>
        <p class="mt-1 text-sm text-zinc-500">{{ currentPayData.desc }}</p>
        <!-- 支付 -->
        <mine-payment class="mt-4" :payData="currentPayData"/>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {isMobileTerminal} from "@/utils/flexible";
import MinePayMenuItem from './components/pay-menu-item.vue'
import MinePayment from './components/payment/index.vue'
import {useRouter} from "vue-router";
import {useStore} from "vuex";

const router = useRouter()
const store = useStore()
const vipPayList = ref('')
const currentPayData = ref({})
//获取数据的方法
const getVipPayList = async () => {
  vipPayList.value = [{
    "id": 0,
    "title": "连续包月",
    "desc": "次月 ¥19 续费,可随时取消",
    "oldPrice": "29",
    "price": "9",
    "isHot": true
  }, {
    "id": 1,
    "title": "连续包年",
    "desc": "次月 ¥198 续费,可随时取消",
    "oldPrice": "258",
    "price": "198",
    "isHot": false
  }, {
    "id": 2,
    "title": "连续包季",
    "desc": "次月 ¥53 续费,可随时取消",
    "oldPrice": "68",
    "price": "53",
    "isHot": false
  }, {"id": 3, "title": "月卡", "desc": "", "oldPrice": "39", "price": "29", "isHot": false}, {
    "id": 4,
    "title": "季卡",
    "desc": "",
    "oldPrice": "79",
    "price": "68",
    "isHot": false
  }, {"id": 5, "title": "年卡", "desc": "", "oldPrice": "298", "price": "258", "isHot": false}]
}
const onNavbarLeftClick = () => {
  store.commit('app/changeRouterType', 'back')
  router.back()
}

getVipPayList()
const onChangeCurrentPay = (item) => {
  currentPayData.value = item
}
</script>
